We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Breakpoint targetable classes

Any breakpoint targetable class may have the shortname of the desired breakpoint added as a suffix. This class will apply at the supplied breakpoint and up. Valid suffixes are: sm (480px), md (768px), lg (992px), xl (1200px). No prefix is the default and should be treated as xs mobile.

Specific breakpoint classes are also available with -only appended (sm-only, md-only, lg-only, xl-only).

.{breakpoint-targetable-class}@{sm[-only],md[-only],lg[-only],xl[-only]}

The following will be 1 column on mobile and 4 columns at md and up.

.flex__container--1-up.flex__container--4-up@md